<template>
  <div class="fd layouts">
    <div class=" hidden-md-and-down layouts-left">
      <LltMenu :isCollapse="isCollapse" />
    </div>
    <div class="layouts-right">
      <LltHeader @handleCollapse="handleCollapse" :isCollapse="isCollapse" />

      <div class="llt-layouts-body ">
        <router-view v-slot="{ Component }">
          <template v-if="Component">
            <transition name="list" v-if="!$store.state.refresh">
              <keep-alive :include="cachedViews">
                <component :is="Component"></component>
              </keep-alive>
            </transition>
          </template>
        </router-view>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  ref,
  reactive,
  getCurrentInstance,
  onMounted,
  toRef,
  toRefs,
  onBeforeMount,
  watch,
  computed,
  onUpdated,
} from "vue";
import { useRouter, useRoute } from "vue-router";
import LltMenu from "/@/layouts/components/menu.vue";
import LltHeader from "/@/layouts/components/header.vue";
import { store } from "/@ts/store";
import { useFullLoading } from "../hooks/fullLoading";
const internalInstance = getCurrentInstance(); //获取当前实例
// const route = internalInstance?.appContext.config.globalProperties.$route;
const router = useRouter();
const route = useRoute();
const { openLoading, closeLoading } = useFullLoading();
let rootState:any = store.state
onMounted(() => {
  closeLoading();
});

const cachedViews = computed(()=>{
    return rootState.tagPages.filter((res:any)=>res.meta&&!res.meta.noCache).map((res:any)=>res.name)
})
/*
基本数据类型
引用数据类型（复杂类型） 个人建议 ref初始化变量 
ref 和 reactive 本质我们可以简单的理解为ref是对reactive的二次包装, 
ref定义的数据访问的时候要多一个.value
*/

var isCollapse = ref(false);
const state = reactive({
  data: { a: 1 },
});
const handleCollapse = (e: boolean) => {
  isCollapse.value = !e;
};
</script>

<style scoped lang="scss">
.layouts {
  width: 100vw;
  height: 100vh;
  position: relative;
  top: 0;
  left: 0;
}
.layouts-right {
  flex: 1;
  height: 100%;
  background-color: #f0f2f5;
}
.layouts-left {
  // flex-basis: 200px;
  overflow-y: hidden;
  overflow-x: hidden;
  max-width: 200px;
  flex-shrink: 0;
}
.llt-layouts-body {
  height: 100px;
  min-height: calc(100% - 114px);
  max-height: calc(100% - 114px);
  overflow: hidden;
  background-color: #f0f2f5;
}
// 路由切换动画
.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}
.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateY(30px);
}
</style>
